<template>
  <div class="weaponshop">
    <template>
      <el-header class="shoptips">法器店</el-header>
      <div class="shoptipsmsg">
        <div>法器店老板 xx：</div>
        <div>哎哟！欢迎光临，本店的法器都是沧海城最好的！包你满意！</div>
      </div>
      <el-row :gutter="0">
        <el-col :span="4" v-for="(value, index) in shoplist" :key="index">
          <div class="grid-content bg-purple">
            <el-card :body-style="{ padding: '0px' }">
              <div style="padding: 14px;line-height: 20px;">
                <div style="padding-bottom: 3px">
                  名字：
                  <span style="font-size: 16px">{{
                    value.equipment.name
                  }}</span>
                </div>
                <div>
                  描述：<span style="font-size: 14px; letter-spacing: 1px">{{
                    value.equipment.info
                  }}</span>
                </div>
                <div>库存：{{ value.count }}</div>
                <div>价格：{{ value.equipment.price }}</div>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="buybutton('equipment',value.equipment._id,value._id)"
                    >购 买</el-button
                  >
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="paginations.page_index"
                :page-sizes="paginations.page_sizes"
                :page-size="paginations.page_size"
                :layout="paginations.layout"
                :total="paginations.total"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </template>
  </div>
</template>
<script>
export default {
  name: "weaponshop",
  data() {
    return {
      paginations: {
        page_index: 1, // 当前位于页
        total: 0, // 页总数
        page_size: 12, // 一页显示总数
        page_sizes: [24, 36, 48], // 每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper",
      },
      shoplist: [],
      alltableData: [],
      filterTableData: [],
      upform:{
        id:'',
        itemtype:''
      },

    };
  },
  created() {
    this.getweaponshopitemlist();
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    getweaponshopitemlist() {
      // 获取商店数据
      this.$axios
        .get("/api/shops/getitemlist/get/601928fa50b9cf98508aedf0")
        .then((res) => {
          this.alltableData = res.data;
          this.filterTableData = res.data;
          console.log(res.data);
          // 设置分页数据
          this.setPaginations();
        })
        .catch((err) => console.log(err));
    },
    buybutton(itemtype,equipid,shopgoodid){
      let url;
      if(itemtype == 'equipment'){
          this.upform = {
          option: "equipment",
          id: equipid,
          sid: shopgoodid
        };
        url = `${this.upform.id}`;
      }      
        this.$axios
        .post(`api/shops/goods/buy/${url}`, this.upform)
        .then(res => {
          console.log(res);
          // 添加成功
          this.$message({
            message: res.data.msg,
          });
          this.getweaponshopitemlist();
        })
        .catch(err => {
          this.$message({
            message: "系统错误",
            type: 'warning'
          });
          this.getweaponshopitemlist()
        })
    },
    handleSizeChange(page_size) {
      // 切换size
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.shoplist = this.alltableData.filter((item, index) => {
        return index < page_size;
      });
    },
    handleCurrentChange(page) {
      // 获取当前页
      let index = this.paginations.page_size * (page - 1);
      // 数据的总数
      let nums = this.paginations.page_size * page;
      // 容器
      let tables = [];

      for (let i = index; i < nums; i++) {
        if (this.alltableData[i]) {
          tables.push(this.alltableData[i]);
        }
      }
      this.shoplist = tables;
    },
    setPaginations() {
      // 分页属性设置
      this.paginations.total = this.alltableData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 24;
      // 设置默认分页的数据
      this.shoplist = this.alltableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
  },
  components: {},
};
</script>
<style scoped>
.weaponshop {
  padding: 2%;
}
.container {
  width: 100%;
  height: 100%;
}
.el-header {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.el-aside {
}

.el-main {
  color: #333;
  width: 100%;
  height: 100%;
}
.el-main div {
  font-size: 16px;
}

body > .el-container {
  margin-bottom: 40;
}

.emptydiv {
  width: 100%;
  height: 100%;
  min-height: 1px;
  opacity: 0.01;
  filter: Alpha(Opacity= "10");
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 5;
  float: right;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
.shoptips {
  padding-top: 1%;
  padding-left: 1%;
}
.shoptipsmsg{
  padding-top: 1%;
  padding-left: 1%;
  padding-bottom: 2%;
}
</style>